<template>
  <div class="about">
    <at-button v-if="debug" @click="showData(chartData)">
      <i class="icon icon-align-center" /> this page data
    </at-button>
     <div id="myChart111" :style="{width: '800px', height: '550px'}"></div>

    <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  // name: "hello",
  data() {
    return {
      title:'',
      dataKey: "chart1",
      chartData: {}
    };
  },
  computed: {
    ...mapState(["cookies", "debug"])
  },
  mounted() {    
    // this.downloadImpByChart()
    this.updateCookies();
    this.chartData = this.cookies.chart1.data;
    this.title = this.cookies.chart1.title;
    this.drawLine();
    // this.getCookie();
  },
  methods: {
    ...mapMutations(["updateCookies"]),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart111 = this.$echarts.init(
        document.getElementById("myChart111")
      );
      // alert(this.cookie[0].data[0].data)
      // 绘制图表
      myChart111.setOption({
        title: {
          text: this.cookies.chart1.title,
          x: "center",
          textStyle: {
            fontSize: 26,
            fontFamily: "FZXBSJW"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {
        //       type: "png"
        //     }
        //   }
        // },
        grid: {
          top: "15%",
          left: "5%",
          right: "0%",
          botton:'0%'
        },
        // color 设置线条的颜色 ，注意后面是数组
        // color:['Cornislk','SteelBlue','DarkSlateGray'],
        // 设置x轴的相关数据
        xAxis: {
          // type:'value',
          // 是否让我们的线条和坐标之间有缝隙
          boundaryGap: true,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ]
        },
        yAxis: {
          // type:'category',
        },
        legend: {
          data: [
            "",
            "",
            "",
            this.chartData[0].name,
            this.chartData[1].name,
            this.chartData[2].name
          ],
          left: "right",
          top:'5%'
        },
        // 系列图标配置 他决定着显示那种图标
        series: [
          // {
          //   name: "信访总量",
          //   type: "bar",
          //   data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
          // },
          {
            name: this.chartData[0].name,
            type: "bar",
            // 数据堆叠效果
            // stack:'总领',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: "16"
                    // color: "Cornislk"
                  }
                }
              }
            },
            data: this.chartData[0].data
          },
          {
            name: this.chartData[1].name,
            type: "bar",
            //  stack:'总领',
            //在顶部显示 对应值
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: 16
                    // color: "SteelBlue"
                  }
                }
              }
            },
            data: this.chartData[1].data
          },
          {
            name: this.chartData[2].name,
            type: "bar",
            stack: "总领",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: "16"
                    // color: "DarkSlateGray"
                  }
                }
              }
            },
            data: this.chartData[2].data
          }
        ]
      });
    },
    getCookie() {
      var aCookie = document.cookie.split(";");
      var strcookie = [];
      // var re = [];
      // alert(aCookie.length);
      for (var i = 0; i < aCookie.length; i++) {
        var aCrumb = aCookie[i].split("=");
        if (aCrumb[0].toString().trim() == "order_list") {
          continue;
        }
        strcookie.push(aCrumb[0] + " = " + aCrumb[1] + "\n\n");
      }
      // alert(strcookie.length)
      for (let i = 0; i < strcookie.length; i++) {
        const charts = strcookie[i];
        var json = charts.split("=");
        var name = json[0];
        var value = json[1];
        if (this.dataKey == name.trim()) {
          this.cookie = JSON.parse(value);
        }
      }
    },
    showData(jsondata) {
      this.$Modal.alert({ content: jsondata });
    },
    downloadImpByChart(){
      // alert(1)
      this.common.saveChart(this.$echarts.getInstanceByDom(document.getElementById('myChart111')),this.cookies.chart1.title)
    }
    
  }
};
</script>
<style scoped>
p{
  font-family:'FZXBSJW';
  font-size: 3rem;
}
.about {
  padding-top: 2rem;
}
#myChart111 {
  margin: 0 auto;
}
</style>